<style>
.debug-tabs div{
    overflow: auto;
}
</style>
<div id="debug-tabs" class="debug-tabs">
    <ul>
        <li><a href="#debug-tabs-info">Information</a></li>
        <li><a href="#debug-tabs-logs">Logs</a></li>
        <li><a href="#debug-tabs-code">Codes</a></li>
        <li><a href="#debug-tabs-database">Databale</a></li>
    </ul>
    <div id="debug-tabs-info"></div>
    <div id="debug-tabs-logs"></div>
    <div id="debug-tabs-code"></div>
    <div id="debug-tabs-database"></div>
</div>

<script type="text/javascript">
$(function() {
    $("#debug-tabs").tabs({
        //event: 'mouseover',
        fx: { height: 'toggle', opacity: 'toggle' },
        selected: 1,
        collapsible: true
    }).find(".ui-tabs-nav").sortable({axis:'x'});
    $("#debug-tabs").find('.ui-tabs-panel').css('max-height', '360px');
});
</script>